<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>🔧 列宽调整手柄测试</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
            margin: 20px;
            background: #f5f5f5;
        }
        
        .test-section {
            background: white;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .test-header {
            color: #333;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
        }
        
        /* 模拟Vue组件生成的结构 */
        .resizable-header-wrapper {
            position: relative !important;
            width: 100% !important;
            height: 100% !important;
            display: flex !important;
            align-items: center !important;
            padding-right: 16px !important;
            box-sizing: border-box !important;
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            min-height: 40px;
            margin-bottom: 10px;
        }
        
        .column-title {
            flex: 1 !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            white-space: nowrap !important;
            user-select: none !important;
            font-weight: 500;
            color: #333;
        }
        
        .resize-handle-visible {
            position: absolute !important;
            right: 4px !important;
            top: 50% !important;
            transform: translateY(-50%) !important;
            width: 4px !important;
            height: 60% !important;
            background-color: #409eff !important;
            cursor: col-resize !important;
            border-radius: 2px !important;
            opacity: 0.8 !important;
            z-index: 9999 !important;
            transition: all 0.2s ease-in-out !important;
            box-shadow: 0 0 4px rgba(64, 158, 255, 0.3) !important;
            display: block !important;
            visibility: visible !important;
            pointer-events: auto !important;
        }
        
        .resize-handle-visible:hover {
            background-color: #67c23a !important;
            opacity: 1 !important;
            width: 6px !important;
            box-shadow: 0 0 8px rgba(103, 194, 58, 0.5) !important;
        }
        
        .status {
            padding: 10px;
            background: #e3f2fd;
            border-left: 4px solid #2196f3;
            margin-bottom: 20px;
            font-family: monospace;
        }
        
        .test-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 15px;
        }
        
        .test-th {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 0;
            height: 40px;
        }
        
        .test-td {
            border: 1px solid #dee2e6;
            padding: 8px 12px;
            background: white;
        }
        
        .log-area {
            background: #1e1e1e;
            color: #d4d4d4;
            padding: 15px;
            border-radius: 4px;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 13px;
            max-height: 200px;
            overflow-y: auto;
            margin-top: 15px;
        }
        
        .clear-btn {
            background: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="test-section">
        <div class="test-header">🚀 列宽调整手柄可见性测试</div>
        <div class="status">
            <strong>状态:</strong> 正在测试Vue h()函数生成的DOM结构<br>
            <strong>预期:</strong> 蓝色手柄应该在每个列头右侧可见，悬停时变绿并变宽
        </div>
        
        <div style="margin-bottom: 15px;">
            <strong>测试用例 1: 独立手柄测试</strong>
        </div>
        
        <!-- 模拟Vue renderHeader生成的结构 -->
        <div class="resizable-header-wrapper">
            <span class="column-title">📊 报告类型</span>
            <div class="resize-handle-visible" 
                 onmousedown="handleMouseDown(this, 'type')"
                 onmouseenter="handleMouseEnter(this, 'type')" 
                 onmouseleave="handleMouseLeave(this, 'type')"></div>
        </div>
        
        <div class="resizable-header-wrapper">
            <span class="column-title">👤 举报人</span>
            <div class="resize-handle-visible"
                 onmousedown="handleMouseDown(this, 'reporter')"
                 onmouseenter="handleMouseEnter(this, 'reporter')" 
                 onmouseleave="handleMouseLeave(this, 'reporter')"></div>
        </div>
        
        <div class="resizable-header-wrapper">
            <span class="column-title">📝 举报原因</span>
            <div class="resize-handle-visible"
                 onmousedown="handleMouseDown(this, 'reason')"
                 onmouseenter="handleMouseEnter(this, 'reason')" 
                 onmouseleave="handleMouseLeave(this, 'reason')"></div>
        </div>
        
        <div class="resizable-header-wrapper" style="background: #f0f0f0; opacity: 0.6;">
            <span class="column-title">⚙️ 操作 (最后一列，无手柄)</span>
        </div>
        
        <div style="margin: 25px 0 15px 0;">
            <strong>测试用例 2: 表格环境测试</strong>
        </div>
        
        <table class="test-table">
            <thead>
                <tr>
                    <th class="test-th" style="width: 200px;">
                        <div class="resizable-header-wrapper">
                            <span class="column-title">📊 报告类型</span>
                            <div class="resize-handle-visible"
                                 onmousedown="handleMouseDown(this, 'table-type')"
                                 onmouseenter="handleMouseEnter(this, 'table-type')" 
                                 onmouseleave="handleMouseLeave(this, 'table-type')"></div>
                        </div>
                    </th>
                    <th class="test-th" style="width: 150px;">
                        <div class="resizable-header-wrapper">
                            <span class="column-title">👤 举报人</span>
                            <div class="resize-handle-visible"
                                 onmousedown="handleMouseDown(this, 'table-reporter')"
                                 onmouseenter="handleMouseEnter(this, 'table-reporter')" 
                                 onmouseleave="handleMouseLeave(this, 'table-reporter')"></div>
                        </div>
                    </th>
                    <th class="test-th" style="width: 180px;">
                        <div class="resizable-header-wrapper">
                            <span class="column-title">⚙️ 操作</span>
                        </div>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="test-td">违规内容</td>
                    <td class="test-td">张三</td>
                    <td class="test-td">查看详情</td>
                </tr>
                <tr>
                    <td class="test-td">垃圾信息</td>
                    <td class="test-td">李四</td>
                    <td class="test-td">处理举报</td>
                </tr>
            </tbody>
        </table>
        
        <button class="clear-btn" onclick="clearLog()">清除日志</button>
        <div class="log-area" id="logArea">
            <div>🎯 等待操作日志...</div>
        </div>
    </div>
    
    <div class="test-section">
        <div class="test-header">📋 检查项目</div>
        <div id="checklist">
            <div>✅ 蓝色手柄在列头右侧可见</div>
            <div>✅ 鼠标悬停时手柄变绿色并变宽</div>
            <div>✅ 鼠标点击时触发调整开始</div>
            <div>✅ 控制台输出相关日志信息</div>
            <div>✅ 最后一列没有调整手柄</div>
        </div>
    </div>
    
    <script>
        let logCount = 0;
        
        function addLog(message, type = 'info') {
            const logArea = document.getElementById('logArea');
            const time = new Date().toLocaleTimeString();
            const colors = {
                info: '#61dafb',
                success: '#67c23a',
                warning: '#f1c40f',
                error: '#e74c3c'
            };
            
            logCount++;
            const logLine = `<div style="color: ${colors[type] || '#d4d4d4'}; margin-bottom: 4px;">
                [${time}] ${logCount}: ${message}
            </div>`;
            
            logArea.innerHTML += logLine;
            logArea.scrollTop = logArea.scrollHeight;
        }
        
        function handleMouseEnter(element, columnKey) {
            addLog(`⭐ 鼠标进入调整手柄: ${columnKey}`, 'success');
            console.log('🎯 鼠标进入调整手柄:', columnKey);
        }
        
        function handleMouseLeave(element, columnKey) {
            addLog(`👋 鼠标离开调整手柄: ${columnKey}`, 'info');
            console.log('📤 鼠标离开调整手柄:', columnKey);
        }
        
        function handleMouseDown(element, columnKey) {
            addLog(`🚀 开始调整列宽: ${columnKey}`, 'warning');
            console.log('🎯 开始调整列宽:', columnKey);
        }
        
        function clearLog() {
            const logArea = document.getElementById('logArea');
            logArea.innerHTML = '<div>🎯 等待操作日志...</div>';
            logCount = 0;
            addLog('📝 日志已清除', 'info');
        }
        
        // 页面加载完成后的检查
        window.addEventListener('load', function() {
            addLog('🎉 页面加载完成，开始检测调整手柄', 'success');
            
            const handles = document.querySelectorAll('.resize-handle-visible');
            addLog(`🔍 找到 ${handles.length} 个调整手柄`, 'info');
            
            handles.forEach((handle, index) => {
                const rect = handle.getBoundingClientRect();
                const isVisible = rect.width > 0 && rect.height > 0;
                const computedStyle = window.getComputedStyle(handle);
                
                addLog(`📏 手柄 ${index + 1}: 宽度=${rect.width}px, 高度=${rect.height}px, 可见=${isVisible}`, 
                       isVisible ? 'success' : 'error');
                addLog(`🎨 手柄 ${index + 1}: 背景色=${computedStyle.backgroundColor}, 透明度=${computedStyle.opacity}`, 'info');
            });
            
            setTimeout(() => {
                addLog('💡 请尝试将鼠标悬停在蓝色手柄上测试交互效果', 'warning');
            }, 1000);
        });
    </script>
</body>
</html>